/*
 * @Description: 失效票列表
 * @Author: shuaishuai.wang
 * @Date: 2019-09-02 13:46:01
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-25 00:44:01
 */
<template>
  <div
    class="main fontsize32"
    v-wechat-title="$route.meta.title"
  >
    <xb-scroll
      ref="scroll"
      :useBody="useBody"
      :getListData="getFailureTicketList"
      :up="up"
      class="listScroll"
    >
      <div
        v-if="ticketList.length!==0"
        class="ticket_list"
      >
        <my-ticket-item
          v-for="(ticket, index) in ticketList"
          :key="index"
          :ticket='ticket'
        ></my-ticket-item>
      </div>
      <!-- 无数据 -->
      <div
        v-else
        class="no_data"
      >
        <div class="icon">
          <img :src="noData">
        </div>
        <p>暂时没有失效车票</p>
      </div>
    </xb-scroll>
  </div>
</template>

<script>
import { XBScroll } from 'vue-xb-ui-depot'
import { getTicketList } from './../../interface/getInterface'
export default {
  components: {
    'xb-scroll': XBScroll
  },
  data() {
    return {
      noData: require('@wechat/img/no-data.png'), // 无数据图片
      ticketList: [], // 车票数据
      ticketCount: 0, // 当前票数
      loadingState: true, // 页面加载状态
      loadingType: 'loading', // 页面加载类型
      useBody: false,
      up: {
        noMoreSize: 21,
        page: { size: 20 }
      }
    }
  },
  mounted() {
    // 获取票列表，TICKET_STATE是2为失效票
    // getTicketList({ TICKET_STATE: 2 }).then(data => { // 请求失效票数据
    //   this.ticketList = data.LIST
    //   this.ticketCount = data.COUNT
    //   this.loadingState = false
    // }).catch(err => {
    //   this.loadingType = 'fail'
    //   console.log(err)
    // })
  },
  methods: {
    getFailureTicketList(PAGE_INDEX, PAGE_CAPACITY) {
      return getTicketList({ PAGE_INDEX, PAGE_CAPACITY, TICKET_STATE: 2 }).then(res => {
        if (res.COUNT === 0) {
          return { length: PAGE_CAPACITY, count: 1 }
        } else {
          this.ticketList = PAGE_INDEX === 1 ? res.LIST : this.ticketList.concat(res.LIST)
          return { length: PAGE_CAPACITY, count: res.COUNT }
        }
      }).catch(err => {
        console.warn(err)
        return { length: PAGE_CAPACITY, count: 1 }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  // min-height: fill-available;
  box-sizing: border-box;
  background-color: #f2f5f6;
  .no_data {
    .icon {
      width: 522px;
      margin: auto;
      padding-top: 64px;
      padding-bottom: 32px;
      img {
        width: 100%;
      }
    }
    p {
      text-align: center;
      color: #9fb0b2;
    }
    .buy_ticket {
      width: 240px;
      margin: 160px auto;
      button {
        width: 100%;
        height: 68px;
        background: rgba(2, 122, 255, 1);
        border-radius: 25px; /*no*/
        border: 0;
        color: #fff;
      }
    }
  }
  .ticket_list {
    padding: 32px 0;
    .ticket_num {
      padding: 32px;
    }
  }
}
</style>
